<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>17.4.1-预字符串化</title>
</head>
<body>
    <!-- 参考例子 1 -->
    <div>
        <p></p>
        <p></p>
        <!-- ... 20 个 p 标签  -->
        <p></p>
    </div>

</body>
    <script>
        /**
         * 预字符串化
         * - 大块的静态内容可以通过 innerHTML 进行设置，在性能上具有一定优势。
         * - 减少创建虚拟节点产生的性能开销。
         * - 减少内存占用。
        */

        /**
         * 参考例子 1
         * - 当采用了静态提升优化策略时，其编译后
         * */ 

        const hoist1 = createVNode('p', null, null, PatchFlags.HOISTED)
        const hoist2 = createVNode('p', null, null, PatchFlags.HOISTED)
        // ... 20 个 hoistx 变量
        const hoist20 = createVNode('p', null, null, PatchFlags.HOISTED)

        function render(){
            return (openBlock(), createBlock('div', null, [
                hoist1, hoist2, /* ...20 个变量 */, hoist20
            ]))
        }

        /**
         * 参考例子 1
         * - 预字符串化能够将这些静态节点序列化为字符串，
         *   并生成一个 Static 类型的 VNode
         * */ 

        const hoistStatic = createStaticVNode('<p></p><p></p><p></p>...20 个...<p></p>')

        function render(){
            return (openBlock(), createBlock('div', null, [
                hoistStatic
            ]))
        }
       

    </script>
</html>